<template>
    <div>
        <div style="width:100%;align-items: center;" id="id">
            <div :style="padding">
                <div style="display: inline-block">
                    <div :style="flowRateValueNameStyle">{{ flowRateValueName }}</div>
                    <div :style="inFlowRate">{{ flowRateValue }}</div>
                </div>
                <div :style="flowRateUnit">{{ unitValue }}</div>
                <div :style="imgStyle">
                    <img :src="require('@/assets/img/'+flowImg)">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import baseComp from "./baseComp";

export default {
    name: "flowRate",
    extends: baseComp,
    model: {
        prop: 'flowRate',
        event: 'flowRateChange'
    },
    props: {
        myData: {
            type: Object,
            default: () => {
            },
        },
        requstParams: {
            type: Object,
            default: () => {
            },
        },
        flowRate: [Number, String]
    },
    data() {
        return {
            id: 'myFlowRate',
            chartView: null,
            //边距设置
            padding: {
                paddingTop: '0px',
                paddingLeft: '0px'
            },
            //流显示样式
            inFlowRate: {
                fontSize: '50px',
                color: '#06b894',
                backgroundColor: '',
                fontFamily: 'huxiaobo !important',
            },
            //流单位样式
            flowRateUnit: {
                display: 'inline-block',
                fontSize: '10px',
                // font: 'Arial',
                color: '#4c5458',
                margin: '0 10px',
                fontFamily: 'huxiaobo !important',
            },
            //流图标样式
            imgStyle: {
                display: 'inline-block',
                left: '100px',
                top: '100px'
            },
            //data
            flowRateValueNameStyle: {
                marginTop: '0px',
                marginLeft: '0px',
                marginRight: '0px',
                marginBottom: '0px',
                fontSize: '10px',
                fontColor: '#333333',
            },
            flowImg: 'low.png',
            flowRateValueName: '接收',
            flowRateValue: this.flowRate || '50',
            //流单位
            unitValue: 'Kbsp',
            flowRateValueMapping: ''
        };
    },
    components: {},
    created() {
    },
    mounted() {

    },
    beforeDestroy() {

    },

    watch: {
        myData: {
            handler(val) {
                this.initData();
            },
            deep: true,
            immediate: true
        },
        requstParams: {
            handler(reqParam) {
                this.getRemoteData(reqParam);
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        /**
         * 获取远程访问数据
         */
        getRemoteData(reqParam) {
            let url = reqParam.initUrl;
            let method = reqParam.initMethod;
            if (url && method) {
                let form = this.getRequestParam()
                this.init(method, url, form);
            }
        },
        /**
         * 获取请求参数体
         * @returns {{}}
         */
        getRequestParam() {
            let requstForm = this.requstParams.initRequstForm;
            let form = {}
            if (requstForm) {
                for (let i = 0; i < requstForm.length; i++) {
                    form[requstForm[i].label] = requstForm[i].value;
                }
            }
            return form
        },

        /**
         * 初始化数据配置
         */
        initData() {
            let obj = this.myData;
            //数值

            this.flowRateValueName = obj.flowRateName;//流名称
            this.flowRateValueNameStyle.marginTop = obj.flowRateNameTop
            this.flowRateValueNameStyle.marginBottom = obj.flowRateNameButton
            this.flowRateValueNameStyle.marginLeft = obj.flowRateNameLeft
            this.flowRateValueNameStyle.marginRight = obj.flowRateNameRight
            this.flowRateValueNameStyle.fontColor = obj.flowRateNameColor
            this.flowRateValueNameStyle.fontSize = obj.flowRateNameSize
            this.flowImg = obj.flowImg;

            this.inFlowRate.fontSize = obj.fontSize; //字体大小
            this.inFlowRate.color = obj.fontColor; //字体颜色
            this.inFlowRate.fontFamily = obj.fontData; //字体样式
            // 主标题
            this.unitValue = obj.fontUnit //字体单位
            this.flowRateUnit.color = obj.fontUnitColor; //单位字体颜色
            this.flowRateUnit.fontSize = obj.fontUnitSize; //单位字体大小
            this.flowRateUnit.fontFamily = obj.fontUnitData; //单位字体样式
            this.flowRateValueMapping = obj.flowRateValueMapping;
            this.flowRateUnit.paddingTop = obj.topMargin; //上边距
            this.flowRateUnit.paddingLeft = obj.leftMargin; //左边距
        },
        //***通过数据映射值赋值****
        getDataByMapping(result) {
            if (result) {
                for (const key in result) {
                    if (key === this.flowRateValueMapping) {
                        this.flowRateValue = result[key];
                        break;
                    }
                }
            }
        },

        //***发送请求****
        getData(method, url, params) {
            try {
                return this.$myAxios.request(method, url, params).then((res) => {
                    return res;
                });
            } catch (e) {
                return 0;
            }
        },
        //接口数据
        async init(method, url, requstForm) {
            if (url && url != "" && method && method != "") {
                let res = await this.getData(method, url, requstForm);
                if (res == 0) {
                    this.flowRateValue = res;
                    return;
                }
                let resData = res.data.data.records[0];
                if (resData) {
                    let result = resData.form;
                    this.getDataByMapping(result)
                }
            }
        },
        //将传入的参数--组装为一个对象
        getInitParam() {
            let objRequst = {};
            if (
                this.requstParams.initRequstForm &&
                this.requstParams.initRequstForm.length > 0
            ) {
                this.requstParams.initRequstForm.forEach((val) => {
                    objRequst[val.label] = val.value;
                });
            }
            return objRequst;
        },

        //timer**
        initTimer(intervalTime) {
            this.timer = window.setInterval(() => {
                this.getRemoteData(this.requstParams);
            }, intervalTime)
        },
    },
};
</script>
<style lang="less" scoped>
@font-face {
    font-family: huxiaobo;
    src: url('../../assets/fonts/huxiaobodenanshengzhiti.otf');
}
</style>


